<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 4.0
  Author: PIXINVENT
  Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <!--<meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">-->
    <!--<meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">-->
    <title>BAUHINIA SQUARE Admin</title>
    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->
    <!-- CORE CSS-->
    <link href="css//materialize.css" type="text/css" rel="stylesheet">
    <link href="css//style.css" type="text/css" rel="stylesheet">
    <!-- Custome CSS-->
    <link href="css/custom/custom.css" type="text/css" rel="stylesheet">
    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="vendors/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
    <link href="vendors/flag-icon/css/flag-icon.min.css" type="text/css" rel="stylesheet">
</head>

<body ng-app="materializeApp" class="active-member-car">
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed" th:include="header :: header"></div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!-- START LEFT SIDEBAR NAV-->
        <aside id="left-sidebar-nav" th:include="leftNavigation :: navigation">
        </aside>
        <!-- END LEFT SIDEBAR NAV-->
        <!-- //////////////////////////////////////////////////////////////////////////// -->
        <!-- START CONTENT -->
        <section id="content">
            <!--breadcrumbs start-->
            <div id="breadcrumbs-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col s10 m6 l6">
                            <h5 class="breadcrumbs-title">积分抵扣列表</h5>
                            <ol class="breadcrumbs">
                                <li><a href="/">上海紫荆广场</a>
                                </li>
                                <li><a href="#">积分</a>
                                </li>
                                <li class="active">抵扣 列表</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!--breadcrumbs end-->
            <!-- //////////////////////////////////////////////////////////////////////////// -->
            <!--start container-->
            <div class="container">
                <form id="form-filter" method="POST" action="/memberCar/filter" data-parsley-validate>
                    <div class="section">
                        <div class="row">
                            <div class="input-field col s3" style="margin-right: 24px">
                                <input id="memberName" placeholder="通过会员名称搜素" name="memberName" type="text" />
                            </div>
                            <div class="input-field col s3" style="margin-right: 24px">
                                <input id="carNumber" placeholder="通过车牌号搜素" name="carNumber" type="text" />
                            </div>
                            <div class="col s3" style="margin-left:12px;position:relative;top:1.3em">
                                <button type="button" id="filter-button" name="filter-button"
                                        class="waves-effect waves-light btn right">
                                    <i class="material-icons left">local_bar</i>筛&emsp;选
                                </button>
                            </div>
                            <input type="hidden" id="page" name="page" value="">
                            <input type="hidden" id="size" name="size" value="">
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="card-panel">
                            <div class="row">
                                <div class="col s12">
                                    <div class="row">
                                        <table class="striped centered">
                                            <thead>
                                            <tr>
                                                <th>会员姓名</th>
                                                <th>车牌号</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="model:${list}">
                                                <td style="width: 33%" th:text="${model?.memberName}"></td>
                                                <td style="width: 33%"th:text="${model?.carNumber}"></td>
                                                <td style="width: 34%">
                                                    <a class="waves-effect waves-light" th:href="@{'/memberCar/unbind/' + ${model?.id}}"><i class="material-icons left">edit</i>解绑</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                            <thead><tr th:if="${list?.size()!=0}"><td style="padding:0;height:16px"></td></tr></thead>
                                            <thead style="border-bottom: none">
                                            <tr th:if="${list?.size()!=0}">
                                                <th>总计</th>
                                                <th></th>
                                                <th th:text="'共 '+${pageMap['total']}+' 条'"></th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s12">p
                                    <div class="row" ng-controller="PaginationController" th:object="${pageMap}">
                                        <pagination class="right" th:attr="page=''+ *{index}+'',total=''+*{total}+''"
                                                    page-size="10" show-prev-next="true" dots="...."
                                                    hide-if-empty="false" adjacent="2" scroll-top="false"
                                                    pagination-action="changePage(page)"/>
                                        <div class="right input-field"  style="width:80px;" >
                                            <input id="btnJump"  type="text" />
                                            <label> 回车跳转</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--</form>-->
            </div>
            <!--end container-->
        </section>
        <!-- END CONTENT -->
        <!-- START RIGHT SIDEBAR NAV-->
        <aside id="right-sidebar-nav" th:include="rightSidebarNav :: right-sidebar-nav">
        </aside>
        <!-- END RIGHT SIDEBAR NAV-->

    </div>
    <!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer gradient-45deg-light-cyan-cyan" th:include="footer :: footer">
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="vendors/jquery-3.2.1.min.js"></script>
<!--angularjs-->
<script type="text/javascript" src="vendors/angular.min.js"></script>
<script type="text/javascript" src="vendors/angular-materialize.js"></script>
<!--materialize js-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="js/plugins.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="js/angular-ui.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="js/custom-script.js"></script>

<script type="text/javascript" src="js/advanced-ui-modals.js"></script>

<script th:inline="javascript">
    $(document).ready(function () {
        var condition = /*[[${session.memberCar_queryCondition}]]*/ undefined
        log("out" + condition);

        if (condition) {
            var carNumber = condition.carNumber;
            if(carNumber){
                $("#carNumber").val(carNumber);
            }
            var memberName = condition.memberName;
            if(memberName){
                $("#memberName").val(memberName);
            }
        }

        $('#filter-button').on('click', function(event) {
            $('#page').val(1)
            $('#size').val(10)

            $('#form-filter').submit()
        });


        // 跳转
        $('#btnJump').bind('keyup', function(event) {
            var index = $("#btnJump").val();
            if (event.keyCode == "13") {
                var $index = index;

                var isNotNull = document.getElementById('form-filter')

                if (isNotNull) {
                    if ($('#page')) {
                        $('#page').val(parseInt($index))
                    }

                    if ($('#size')) {
                        $('#size').val(10)
                    }

                    $('#form-filter').submit()
                } else {
                    var pageObj = {
                        'index': $index,
                        'size': 10,
                        'total': 1000,
                    }

                    $('#pageJson').val(JSON.stringify(pageObj))

                    $('#pageForm').submit()
                }
            }
        })

    })

</script>

</body>

</html>